<template>
  <view class="container">
    <uv-navbar title="选择店铺" leftIconColor="#fff" autoBack bgColor="rgba(0,0,0,0)" :title-style="{'color':'#fff'}" placeholder></uv-navbar>
    <view class="main">
      <view class="block">
        <view class="block-fl">
          <view class="block-fl-title">我要开店</view>
          <view class="block-fl-desc">请按步骤完成开店</view>
        </view>
        <image class="house_icon" src="../../static/images/house.png" mode=""></image>
      </view>
      <view class="from-warp">
        <view class="tabs">
          <view class="tab-item" @click="setIndex(index)" :class="currentIndex == index?'active':''" v-for="(item, index) in tabList" :key="index">
            <view class="tab-item-step">
              {{index+1}}
            </view>
            <view class="tab-item-label">
              {{item.name}}
            </view>
          </view>
        </view>
        <image class="tab_icon" :src="`/static/images/tab${currentIndex+1}.png`" mode="aspectFill"></image>
        <view class="linner" v-if="currentIndex == 0">
          <input class="linner-ipt" placeholder-class="styles1" placeholder="请输入地推手机号" type="text" />
          <view class="linner-desc">
            为了更好的服务您，请绑定地推
          </view>
          <view class="linner-btn" @click="onSave">
            确认绑定
          </view>
        </view>
        <view class="join_store" v-if="currentIndex == 1">
          <view class="join_store-title">
            请选择入驻店铺方式
          </view>
          <view class="warpper">
            <view class="warpper-item">
              <view class="warpper-item-title">
                品牌入驻(连锁店)
              </view>
              <view class="warpper-item-info">
                <view class="info-btn">
                  入驻
                </view>
                <image class="logo" src="../../static/images/st1.png" mode=""></image>
              </view>
            </view>
            <view class="warpper-item">
              <view class="warpper-item-title">
                建立品牌
              </view>
              <view class="warpper-item-info">
                <view class="info-btn">
                  创建
                </view>
                <image class="logo" src="../../static/images/st2.png" mode=""></image>
              </view>
            </view>
          </view>
          <view class="single_warpper">
            <view class="single_warpper-fl">
              <view class="title">
                单体点入驻(单店)
              </view>
              <view class="btn">
                入驻
              </view>
            </view>
            <image class="logo" src="../../static/images/st3.png" mode=""></image>
          </view>
          <view style="display: flex;justify-content: center;">
            <view class="submit_btn" @click="onSubmit">
              提交
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="btn1">
        退出登录
      </view>
      <view class="btn1">
        手机号换绑
      </view>
      <view class="btn2">
        注册新店铺
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        tabList: [
          {
            name: "绑定地推"
          },
          {
            name: "资质认证"
          },
          {
            name: "成功入驻"
          }
        ],
        currentIndex: 1
      }
    },
    methods: {
      onSave(){
        uni.navigateTo({
          url: "/pages/login/myMerchant"
        })
      },
      onSubmit(){
        uni.navigateTo({
          url: "/pages/login/gasStation"
        })
      },
      setIndex(index){
        this.currentIndex = index;
      }
    }
  }
</script>
<style>
  .styles1{
    font-weight: 400;
    font-size: 32rpx;
    color: #AAAAAA;
  }
</style>
<style lang="scss" scoped>
  .footer{
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    background: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    .btn1{
      width: 210rpx;
      height: 76rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      border: 2rpx solid #EEEEEE;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      text-align: center;
      line-height: 76rpx;
    }
    .btn2{
      width: 210rpx;
      height: 76rpx;
      background: linear-gradient( 270deg, #FF3C21 0%, #EA7222 100%);
      box-shadow: 0rpx 16rpx 20rpx 0rpx rgba(244,88,33,0.2);
      font-weight: bold;
      border-radius: 20rpx;
      font-size: 28rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 76rpx;
    }
  }
  .active{
    color: #fff !important;
  }
  .container{
    width: 100vw;
    height: 100vh;
    background: linear-gradient( 180deg, #EA7222 0%, rgba(234,214,34,0) 100%);
    position: relative;
    .main{
      padding: 88rpx 30rpx;
      box-sizing: border-box;
      .block{
        display: flex;
        justify-content: space-between;
        margin-top: 30rpx;
        .block-fl{
          display: flex;
          flex-direction: column;
          padding: 20rpx 0;
          box-sizing: border-box;
          justify-content: space-around;
          .block-fl-title{
            font-weight: 400;
            font-size: 68rpx;
            color: #FFFFFF;
          }
          .block-fl-desc{
            font-weight: 400;
            font-size: 24rpx;
            color: #FFFFFF;
            opacity: .9;
          }
        }
        .house_icon{
          width: 194rpx;
          height: 172rpx;
        }
      }
      .from-warp{
        border-radius: 30rpx 30rpx 30rpx 30rpx;
        margin-top: 60rpx;
        position: relative;
        .tab_icon{
          position: absolute;
          width: 100%;
          height: 208rpx;
          top: 0;
          left: 0;
          z-index: 20;
        }
        .tabs{
          display: flex;
          position: relative;
          z-index: 50;
          .tab-item{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-weight: bold;
            font-size: 28rpx;
            color: #EA7222;
            height: 160rpx;
            padding: 10rpx 0;
            box-sizing: border-box;
            .tab-item-step{
              
            }
            .tab-item-label{
              margin-top: 5rpx;
            }
          }
        }
        .join_store{
          padding: 50rpx 30rpx;
          box-sizing: border-box;
          background: #fff;
          border-radius: 0 0 30rpx 30rpx;
          .join_store-title{
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
            text-align: center;
          }
          .warpper{
            display: flex;
            justify-content: space-between;
            margin-top: 30rpx;
            .warpper-item{
              width: 300rpx;
              background: #FFF6F2;
              border-radius: 30rpx;
              padding: 24rpx;
              box-sizing: border-box;
              .warpper-item-title{
                font-weight: bold;
                font-size: 28rpx;
                color: #A7372E;
              }
              .warpper-item-info{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .info-btn{
                  width: 88rpx;
                  height: 42rpx;
                  background: #EA7222;
                  border-radius: 26rpx;
                  font-weight: bold;
                  font-size: 24rpx;
                  color: #FFFFFF;
                  text-align: center;
                  line-height: 42rpx;
                }
                .logo{
                  width: 94rpx;
                  height: 94rpx;
                }
              }
            }
          }
          .single_warpper{
            padding: 24rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            background: #FFF6F2;
            margin-top: 30rpx;
            .single_warpper-fl{
              display: flex;
              flex-direction: column;
              .title{
                font-weight: bold;
                font-size: 28rpx;
                color: #A7372E;
              }
              .btn{
                width: 88rpx;
                height: 42rpx;
                background: #EA7222;
                border-radius: 26rpx;
                font-weight: bold;
                font-size: 24rpx;
                color: #FFFFFF;
                text-align: center;
                line-height: 42rpx;
                margin-top: 20rpx;
              }
            }
            .logo{
              width: 132rpx;
              height: 132rpx;
            }
          }
          .submit_btn{
            width: 530rpx;
            height: 88rpx;
            background: linear-gradient( 270deg, #FF3C21 0%, #EA7222 100%);
            box-shadow: 0rpx 16rpx 20rpx 0rpx rgba(244,88,33,0.2);
            border-radius: 48rpx;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
            text-align: center;
            line-height: 88rpx;
            margin-top: 68rpx;
          }
        }
        .linner{
          padding: 50rpx;
          box-sizing: border-box;
          background: #fff;
          border-radius: 0 0 30rpx 30rpx;
          .linner-ipt{
            width: 100%;
            height: 104rpx;
            border-radius: 30rpx 30rpx 30rpx 30rpx;
            border: 2rpx solid #EEEEEE;
            font-weight: 400;
            font-size: 32rpx;
            color: #222;
            padding: 0 30rpx;
            box-sizing: border-box;
          }
          .linner-desc{
            font-weight: 400;
            font-size: 24rpx;
            color: #EA7222;
            text-align: center;
            margin-top: 30rpx;
          }
          .linner-btn{
            width: 100%;
            height: 88rpx;
            background: linear-gradient( 270deg, #FF3C21 0%, #EA7222 100%);
            box-shadow: 0rpx 16rpx 20rpx 0rpx rgba(244,88,33,0.2);
            border-radius: 48rpx;
            text-align: center;
            line-height: 88rpx;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
            margin-top: 70rpx;
          }
        }
      }
    }
  }
</style>